<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>alpine js examples for practice</title>
  
</head>
<body>

  <h1 x-data="{ message: 'I ❤️ Alpine' }" x-text="message"></h1>

  <div x-data="{ count: 0 }">
    <button x-on:click="count++">Increment</button>
 
    <span x-text="count"></span>

    <button x-on:click="count--">Increment</button>
  </div>

<!-- 
  use open = !open to toggle the div visibility
  use click.outside to close the div when clicking outside of it 
-->

<div x-data="{ open: false }">
    <button @click="open = ! open">Toggle</button>
 
    <div x-show="open" @click.outside="open = false">Contents...</div>
</div>


<!-- 
it can declare a string, array of items, or even a function that returns data.
in the function, it can use this to access the data
it can use template tag like vue to render the data, needs to specify a key for each item
when user types in the input, the filteredItems will be updated
-->


<div
    x-data="{
        search: '',
 
        items: ['foo', 'bar', 'baz'],
 
        get filteredItems() {
            return this.items.filter(
                i => i.startsWith(this.search)
            )
        }
    }"
>
    <input x-model="search" placeholder="Search...">
 
    <ul>
        <template x-for="item in filteredItems" :key="item">
            <li x-text="item"></li>
        </template>
    </ul>
</div>


<input type="text" :placeholder="placeholder">

<h1>define data in an standalone javascript</h1>

<div x-data="dropdown">
    <button x-bind="trigger">Open Dropdown</button>
 
    <span x-bind="dialogue">Dropdown Contents</span>
</div>
 
<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('dropdown', () => ({
            open: false,
 
            trigger: {
                ['x-ref']: 'trigger',
                ['@click']() {
                    this.open = true
                },
            },
 
            dialogue: {
                ['x-show']() {
                    return this.open
                },
                ['@click.outside']() {
                    this.open = false
                },
            },
        }))
    })
</script>

  
  <script src="script.js" defer></script>

</body>
</html>